<template>
    <div class="search-container">
      <!-- 头部 -->
      <header class="search-header">
        <div class="header-content">
          <div class="header-left">
            <button @click="goHome" class="home-btn" title="返回首页">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                <polyline points="9,22 9,12 15,12 15,22"/>
              </svg>
            </button>
            <div class="header-text">
              <h1>信息检索</h1>
              <p>快速搜索和检索相关信息</p>
            </div>
          </div>
        </div>
      </header>
  
      <!-- 搜索区域 -->
      <main class="search-main">
        <!-- 搜索框 -->
        <div class="search-box">
          <div class="search-input-wrapper">
            <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="11" cy="11" r="8"/>
              <path d="m21 21-4.35-4.35"/>
            </svg>
            <input
              v-model="searchQuery"
              @keydown.enter="performSearch"
              placeholder="输入搜索关键词..."
              class="search-input"
              ref="searchInput"
            />
            <button @click="performSearch" class="search-btn" :disabled="!searchQuery.trim()">
              搜索
            </button>
          </div>
        </div>
  
        <!-- 新闻来源选择 -->
        <!-- <div class="news-sources">
          <h3>选择新闻来源</h3>
          <div class="sources-grid">
            <label class="source-item" v-for="source in newsSources" :key="source.id">
              <input 
                type="checkbox" 
                v-model="selectedSources" 
                :value="source.id"
                @change="updateSelectedSources"
              />
              <div class="source-content">
                <div class="source-icon">{{ source.icon }}</div>
                <div class="source-info">
                  <div class="source-name">{{ source.name }}</div>
                  <div class="source-desc">{{ source.description }}</div>
                </div>
              </div>
            </label>
          </div>
          
          <div class="source-actions">
            <button @click="selectAllSources" class="action-btn">全选</button>
            <button @click="clearAllSources" class="action-btn">清空</button>
            <button @click="selectPopularSources" class="action-btn">选择热门</button>
          </div>
        </div> -->
  
        <!-- 搜索选项 -->
        <div class="search-options">
          <h3>搜索选项</h3>
          <div class="options-grid">
            <label class="option-item">
              <input type="checkbox" v-model="searchOptions.fullText" />
              <span>全文搜索</span>
            </label>
            <label class="option-item">
              <input type="checkbox" v-model="searchOptions.caseSensitive" />
              <span>区分大小写</span>
            </label>
            <label class="option-item">
              <input type="checkbox" v-model="searchOptions.fuzzy" />
              <span>模糊匹配</span>
            </label>
            <label class="option-item">
              <input type="checkbox" v-model="searchOptions.recentOnly" />
              <span>仅显示最近7天</span>
            </label>
          </div>
        </div>
  
        <!-- 搜索结果 -->
        <div class="search-results" v-if="searchResults.length > 0">
          <div class="results-header">
            <h3>搜索结果 ({{ searchResults.length }})</h3>
            <div class="sort-options">
              <select v-model="sortBy" class="sort-select">
                <option value="relevance">按相关性排序</option>
                <option value="date">按日期排序</option>
                <option value="title">按标题排序</option>
              </select>
            </div>
          </div>
          
          <div class="results-list">
            <div 
              v-for="(result, index) in sortedResults" 
              :key="index"
              class="result-item"
              @click="viewResult(result)"
            >
              <div class="result-header">
                <div class="result-title">{{ result.title }}</div>
                <div class="result-actions">
                  <div class="result-source-badge">{{ result.source }}</div>
                  <button 
                    @click.stop="openExternalLink(result)" 
                    class="external-link-btn"
                    title="在新窗口打开原文"
                  >
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                      <polyline points="15,3 21,3 21,9"/>
                      <line x1="10" y1="14" x2="21" y2="3"/>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="result-snippet">{{ result.snippet }}</div>
              <div class="result-meta">
                <span class="result-date">{{ formatDate(result.date) }}</span>
                <span class="result-relevance">相关度: {{ result.relevance }}%</span>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 空状态 -->
        <div v-else-if="hasSearched" class="empty-state">
          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
            <circle cx="11" cy="11" r="8"/>
            <path d="m21 21-4.35-4.35"/>
          </svg>
          <h3>未找到相关结果</h3>
          <p>尝试使用不同的关键词或调整搜索选项</p>
        </div>
  
        <!-- 搜索历史 -->
        <div v-else class="search-history">
          <h3>最近搜索</h3>
          <div class="history-list">
            <div 
              v-for="(item, index) in searchHistory" 
              :key="index"
              class="history-item"
              @click="useHistoryItem(item)"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/>
              </svg>
              <span>{{ item.query }}</span>
              <span class="history-date">{{ formatDate(item.date) }}</span>
            </div>
          </div>
        </div>
      </main>
  
      <!-- 详情弹窗 -->
      <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
        <div class="modal-content detail-modal" @click.stop>
          <div class="modal-header">
            <h3>详细信息</h3>
            <button @click="closeDetailModal" class="modal-close">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 6L6 18M6 6l12 12"/>
              </svg>
            </button>
          </div>
          <div class="modal-body">
            <div class="detail-content">
              <h4>{{ selectedResult?.title }}</h4>
              <div class="detail-meta">
                <span>来源: {{ selectedResult?.source }}</span>
                <span>日期: {{ formatDate(selectedResult?.date) }}</span>
              </div>
              <div class="detail-text">
                {{ selectedResult?.content }}
              </div>
              <div class="detail-link" v-if="selectedResult?.articleUrl">
                <a
                  :href="selectedResult.articleUrl"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="external-link"
                >
                查看原文
                </a>
              </div>
              <iframe
                :src="selectedResult.articleUrl"
                width="100%"
                height="500"
                style="border:1px solid #eee; margin-top:1rem;"
                v-if="selectedResult?.articleUrl"
              ></iframe>
            </div>
          </div>
          <div class="modal-footer">
            <button @click="closeDetailModal" class="modal-btn cancel-btn">关闭</button>
            <button @click="exportResult" class="modal-btn confirm-btn">导出</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { api } from "@/utils/api"
  
  interface SearchResult {
    id: string
    title: string
    snippet: string
    content: string
    source: string
    sourceUrl: string
    articleUrl: string
    date: Date
    relevance: number
  }
  
  interface SearchHistoryItem {
    query: string
    date: Date
  }
  
  interface SearchOptions {
    fullText: boolean
    caseSensitive: boolean
    fuzzy: boolean
    recentOnly: boolean
  }
  
  interface NewsSource {
    id: string
    name: string
    description: string
    icon: string
    url: string
  }
  
  const searchQuery = ref('')
  const searchResults = ref<SearchResult[]>([])
  const searchHistory = ref<SearchHistoryItem[]>([])
  const hasSearched = ref(false)
  const sortBy = ref('relevance')
  const showDetailModal = ref(false)
  const selectedResult = ref<SearchResult | null>(null)
  const searchInput = ref<HTMLInputElement>()
  const selectedSources = ref<string[]>([])
  
  const router = useRouter()
  
  const searchOptions = ref<SearchOptions>({
    fullText: true,
    caseSensitive: false,
    fuzzy: false,
    recentOnly: false
  })
  
  // 新闻来源数据
  const newsSources = ref<NewsSource[]>([
    {
      id: 'sina',
      name: '新浪新闻',
      description: '综合性新闻门户',
      icon: '📰',
      url: 'https://news.sina.com.cn'
    },
    {
      id: 'sohu',
      name: '搜狐新闻',
      description: '互联网新闻资讯',
      icon: '🦊',
      url: 'https://news.sohu.com'
    },
    {
      id: 'netease',
      name: '网易新闻',
      description: '有态度的新闻平台',
      icon: '🐷',
      url: 'https://news.163.com'
    },
    {
      id: 'tencent',
      name: '腾讯新闻',
      description: '腾讯网新闻资讯',
      icon: '🐧',
      url: 'https://news.qq.com'
    },
    {
      id: 'people',
      name: '人民网',
      description: '权威新闻媒体',
      icon: '🏛️',
      url: 'http://www.people.com.cn'
    },
    {
      id: 'xinhua',
      name: '新华网',
      description: '国家通讯社',
      icon: '📡',
      url: 'http://www.xinhuanet.com'
    },
    {
      id: 'cctv',
      name: '央视网',
      description: '中央电视台官网',
      icon: '📺',
      url: 'https://news.cctv.com'
    },
    {
      id: 'china',
      name: '中国网',
      description: '国务院新闻办公室',
      icon: '🇨🇳',
      url: 'http://www.china.com.cn'
    },
    {
      id: 'huanqiu',
      name: '环球网',
      description: '环球时报官网',
      icon: '🌍',
      url: 'https://www.huanqiu.com'
    },
    {
      id: 'caixin',
      name: '财新网',
      description: '财经新闻媒体',
      icon: '💰',
      url: 'http://www.caixin.com'
    },
    {
      id: 'thepaper',
      name: '澎湃新闻',
      description: '专注时政与思想',
      icon: '🌊',
      url: 'https://www.thepaper.cn'
    },
    {
      id: '36kr',
      name: '36氪',
      description: '创业资讯平台',
      icon: '🚀',
      url: 'https://www.36kr.com'
    }
  ])
  
  // 更新选中的来源
  const updateSelectedSources = () => {
    console.log('选中的新闻来源:', selectedSources.value)
  }
  
  // 全选来源
  const selectAllSources = () => {
    selectedSources.value = newsSources.value.map(source => source.id)
  }
  
  // 清空选择
  const clearAllSources = () => {
    selectedSources.value = []
  }
  
  // 选择热门来源
  const selectPopularSources = () => {
    const popularIds = ['sina', 'sohu', 'netease', 'tencent', 'people']
    selectedSources.value = popularIds
  }
  
  // 添加到搜索历史
  const addToHistory = (query: string) => {
    const historyItem: SearchHistoryItem = {
      query,
      date: new Date()
    }
    searchHistory.value.unshift(historyItem)
    // 只保留最近10条记录
    if (searchHistory.value.length > 10) {
      searchHistory.value = searchHistory.value.slice(0, 10)
    }
  }
  
  // 使用历史记录项
  const useHistoryItem = (item: SearchHistoryItem) => {
    searchQuery.value = item.query
    performSearch()
  }
  
  // 格式化日期
  const formatDate = (date: Date | undefined) => {
    if (!date) return ''
    return new Intl.DateTimeFormat('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    }).format(date)
  }
  
  // 返回首页
  const goHome = () => {
    router.push('/')
  }
  
  // 查看结果详情
  const viewResult = (result: SearchResult) => {
    selectedResult.value = result
    showDetailModal.value = true
  }
  
  // 关闭详情弹窗
  const closeDetailModal = () => {
    showDetailModal.value = false
    selectedResult.value = null
  }
  
  // 导出结果
  const exportResult = () => {
    if (!selectedResult.value) return
    
    const content = `
  标题: ${selectedResult.value.title}
  来源: ${selectedResult.value.source}
  日期: ${formatDate(selectedResult.value.date)}
  内容: ${selectedResult.value.content}
  链接: ${selectedResult.value.articleUrl}
    `.trim()
    
    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `${selectedResult.value.title}.txt`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }
  
  // 在新窗口打开外部链接
  const openExternalLink = (result: SearchResult) => {
    if (result.articleUrl) {
      window.open(result.articleUrl, '_blank')
    }
  }

  const sortedResults = computed(() => {
    if (sortBy.value === 'date') {
      // 按时间降序
      return [...searchResults.value].sort((a, b) => b.date.getTime() - a.date.getTime())
    } else if (sortBy.value === 'title') {
      // 按标题字母排序
      return [...searchResults.value].sort((a, b) => a.title.localeCompare(b.title))
    } else {
      // 默认按相关度
      return searchResults.value
    }
  })
  
  // 执行搜索
  const performSearch = async () => {
    const query = searchQuery.value.trim()
    if (!query) return
  
    // 添加到搜索历史
    addToHistory(query)
    hasSearched.value = true

    try{
      const response = await api.get(`/api/news_search/search_news_by_keywords?keyword=${encodeURIComponent(query)}`)

      const list = Array.isArray(response) ? response : response.data || []

      searchResults.value = list.map((item: any, idx: number) => ({
        id: `${idx}`,
        title: item.title,
        snippet: '',
        content: '',
        source: item.source,
        articleUrl: item.url,
        date: new Date(item.publish_time),
        relevance: 100
      }))
    }catch(error){
      searchResults.value = []
      alert(error)
    }
  }
  
  // 组件挂载时聚焦搜索框
  onMounted(() => {
    // 检查用户是否已登录，如果未登录则跳转到登录页
    const savedUserInfo = localStorage.getItem('userInfo')
    if (savedUserInfo) {
      try {
        const userInfo = JSON.parse(savedUserInfo)
        if (!userInfo.isLoggedIn) {
          router.replace('/auth')
          return
        }
      } catch (error) {
        console.error('解析用户信息失败:', error)
        router.replace('/auth')
        return
      }
    } else {
      router.replace('/auth')
      return
    }
    
    if (searchInput.value) {
      searchInput.value.focus()
    }
  })
  </script>
  
  <style scoped>
  .search-container {
    min-height: 100vh;
    background: #ffffff;
    background-image: 
      linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #000000;
    position: relative;
    overflow-x: hidden;
    width: 100%;
  }

  /* 背景装饰光球 */
  .search-container::before,
  .search-container::after {
    content: '';
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
  }

  .search-container::before {
    top: 25%;
    left: -300px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.1) 20%, transparent 50%);
  }

  .search-container::after {
    top: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.25) 0%, rgba(255, 193, 7, 0.1) 20%, transparent 50%);
  }
  
  .search-header {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px) saturate(200%);
    -webkit-backdrop-filter: blur(5px) saturate(200%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem 0;
    width: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .home-btn {
    background: none;
    border: none;
    color: #000000;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
  }
  
  .home-btn:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  
  .header-text h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #000000;
    letter-spacing: -0.025em;
  }
  
  .header-text p {
    margin: 0.25rem 0 0 0;
    color: #666666;
    font-size: 0.9rem;
  }
  
  .search-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    padding-top: 120px;
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
  }
  
  .search-box {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
  }
  
  .search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
  }
  
  .search-input-wrapper:focus-within {
    border-color: #000000;
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  }
  
  .search-icon {
    color: #666666;
    flex-shrink: 0;
  }
  
  .search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 1rem;
    color: #000000;
    outline: none;
  }
  
  .search-input::placeholder {
    color: #666666;
  }
  
  .search-btn {
    background: #000000;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .search-btn:hover:not(:disabled) {
    background: #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  
  .search-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .news-sources, .search-options {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
  }
  
  .news-sources h3, .search-options h3 {
    margin: 0 0 1.5rem 0;
    color: #000000;
    font-size: 1.3rem;
    font-weight: 600;
  }
  
  .sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .source-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
  }
  
  .source-item:hover {
    border-color: #000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .source-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #000000;
  }
  
  .source-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
  }
  
  .source-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 8px;
  }
  
  .source-info {
    flex: 1;
  }
  
  .source-name {
    font-weight: 600;
    color: #000000;
    margin-bottom: 0.25rem;
  }
  
  .source-desc {
    font-size: 0.85rem;
    color: #666666;
  }
  
  .source-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .action-btn {
    background: #f8f9fa;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #000000;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
  }
  
  .action-btn:hover {
    background: #000000;
    color: white;
    border-color: #000000;
  }
  
  .options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
  
  .option-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
  }
  
  .option-item:hover {
    border-color: #000000;
    background: #f8f9fa;
  }
  
  .option-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #000000;
  }
  
  .search-results {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
  }
  
  .results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  
  .results-header h3 {
    margin: 0;
    color: #000000;
    font-size: 1.3rem;
    font-weight: 600;
  }
  
  .sort-select {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: white;
    color: #000000;
    font-size: 0.9rem;
    cursor: pointer;
  }
  
  .results-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .result-item {
    padding: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
  }
  
  .result-item:hover {
    border-color: #000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
  }
  
  .result-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000000;
    line-height: 1.4;
    flex: 1;
    margin-right: 1rem;
  }
  
  .result-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }
  
  .result-source-badge {
    background: #000000;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
  }
  
  .external-link-btn {
    background: none;
    border: none;
    color: #666666;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
  }
  
  .external-link-btn:hover {
    background: #f8f9fa;
    color: #000000;
  }
  
  .result-snippet {
    color: #666666;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  .result-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #666666;
  }
  
  .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
  }
  
  .empty-state svg {
    color: #666666;
    margin-bottom: 1rem;
  }
  
  .empty-state h3 {
    margin: 0 0 0.5rem 0;
    color: #000000;
  }
  
  .empty-state p {
    margin: 0;
    color: #666666;
  }
  
  .search-history {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
  }
  
  .search-history h3 {
    margin: 0 0 1.5rem 0;
    color: #000000;
    font-size: 1.3rem;
    font-weight: 600;
  }
  
  .history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .history-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
  }
  
  .history-item:hover {
    border-color: #000000;
    background: #f8f9fa;
  }
  
  .history-item svg {
    color: #666666;
    flex-shrink: 0;
  }
  
  .history-item span {
    flex: 1;
    color: #000000;
  }
  
  .history-date {
    color: #666666;
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
  }
  
  .modal-content {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .modal-header h3 {
    margin: 0;
    color: #000000;
    font-size: 1.3rem;
    font-weight: 600;
  }
  
  .modal-close {
    background: none;
    border: none;
    color: #666666;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
  }
  
  .modal-close:hover {
    background: #f8f9fa;
    color: #000000;
  }
  
  .modal-body {
    padding: 2rem;
    overflow-y: auto;
    max-height: 60vh;
  }
  
  .detail-content h4 {
    margin: 0 0 1rem 0;
    color: #000000;
    font-size: 1.2rem;
    font-weight: 600;
  }
  
  .detail-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #666666;
  }
  
  .detail-text {
    line-height: 1.8;
    color: #000000;
  }
  
  .modal-footer {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: flex-end;
  }
  
  .modal-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
  }
  
  .cancel-btn {
    background: #f8f9fa;
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .cancel-btn:hover {
    background: #e9ecef;
  }
  
  .confirm-btn {
    background: #000000;
    color: white;
  }
  
  .confirm-btn:hover {
    background: #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  
  @media (max-width: 768px) {
    .search-main {
      padding: 1rem;
    }
    
    .header-content {
      padding: 0 1rem;
    }
    
    .sources-grid {
      grid-template-columns: 1fr;
    }
    
    .options-grid {
      grid-template-columns: 1fr;
    }
    
    .result-header {
      flex-direction: column;
      gap: 0.75rem;
    }
    
    .result-actions {
      align-self: flex-start;
    }
    
    .modal-overlay {
      padding: 1rem;
    }
    
    .modal-content {
      max-height: 90vh;
    }
  }
  </style>